<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>总结Vue数据监测</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
Vue监视数据的原理:
        
    1.Vue会监视data中所有层次的数据
        
    2.如何监测对象中的数据？
        通过setter实现监视，且要在new Vue时就传入要检测的数据
          (1).对象中的后添加的属性,Vue默认不做响应式处理
          (2).如需给后添加的属性做响应式，请使用如下Api：
                Vue.set(target,propertyName/index,value)或
                vm.$set(target,propertyName/index,value)
       
    3.如果检测数组中的数据？
          通过包裹数组更新的元素的方法实现,本质就是做了两件事:   
             (1).调用原生对应的方法对数组进行更新。
             (2).重新解析模板，进行更新页面           
                        
    4.在Vue修改数组中的某各元素一定用如下法：                    
         1.使用这些API:push(),pop(),shift(),unshift,splice(),sotr(),reverse()         
         2.Vue.set() 或 vm.$set()          
              
         
     特别注意：Vue.set() 或 vm.$set() 不能给vm或vm的根数据对象 添加属性！！！    
                        
-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button><br />
			<button @click="addSex">添加性别属性,默认值为:男</button><br />
			<button @click="student.sex ='未知' ">修改性别属性</button><br />
			<button @click="addFriend">在列表首位添加一个朋友</button><br />
			<button @click="setFriend">修改第一个朋友的名字为:张三</button><br />
			<button @click="addHoddy">添加一个爱好</button><br />
			<button @click="setHoddy">修改第一个爱好为:开车</button><br />
			<h3>学生姓名:{{student.name}}</h3>
			<h3>学生年龄:{{student.age}}</h3>
			<h3 v-if="student.sex">学生性别:{{student.sex}}</h3>
			<h3>学生爱好</h3>
			<ul>
				<li v-for="(h,i) of student.hobby">{{h}}</li>
			</ul>
			<h3>朋友们</h3>
			<ul>
				<li v-for="(f,i) of student.friends" :key="f.name">
					{{f.name}} -- {{f.age}}
				</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					student: {
						name: 'tom',
						age: 18,
						hobby: ['抽烟', '喝酒', '烫头'],
						friends: [
							{name: 'jerry', age: 35},
							{name: 'tony', age: 36}
						]
					}
				},
				methods: {
					addSex() {
						this.$set(this.student, 'sex', '男')
						// Vue.set(this.student, 'sex', '男')
					},
					addFriend() {
						this.student.friends.splice(0, 0, {
							name: 'xiaoMo',
							age: 22
						})
						// this.student.friends.push({name: 'xiaoMo', age: 22})
					},
					setFriend() {
						this.student.friends.splice(0, 1, {
							name: '张三'
						})
						// this.student.friends[0].name = {name: '张三', age: 22}
					},
					addHoddy() {
						this.student.hobby.splice(0, 0, '唱歌')
					},
					setHoddy() {
						this.student.hobby.splice(0, 1, '开车')
						// Vue.set(this.student.hobby, 0, '开车')
						// this.$set(this.student.hobby, 0, '开车')
					}
				}
			})
		</script>
	</body>
</html>
